<template>
  <div class="user_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-form ref="formRef" :model="form" :rules="rules" :disabled="readOnly" label-width="100px"
                class="base_details_form">
                <el-form-item label="用户名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="用户头像" prop="avatar">
                  <UploadSinglePicture v-model="form.avatar" :disabled="readOnly" :width="120"
                    :fileSize="$.imgFileSize()" />
                </el-form-item>
                <el-form-item label="归属基地" prop="shopId">
                  <el-select v-model="form.shopId">
                    <el-option v-for="(item, index) in baseOptions" :key="index" :label="item.label" :value="item.id" />
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="数据权限" prop="dataShopList">
                  <el-checkbox-group v-model="form.dataShopList">
                    <el-checkbox v-for="(item, index) in baseOptions" :key="index" :label="item.id">{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item> -->
                <el-form-item label="角色" prop="roleId">
                  <el-select v-model="form.roleId">
                    <el-option v-for="(item, index) in roleOptions" :key="index" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="loginName">
                  <el-input v-model="form.loginName" placeholder="请输入" />
                </el-form-item>
                <el-form-item v-show="route.query().type == 'add'" label="密码" prop="loginPassword">
                  <el-input v-model="form.loginPassword" type="password" show-password placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer v-show="!readOnly">
        <el-button @click="back">取消</el-button>
        <el-button @click="checkForm" type="primary">保存</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import UploadSinglePicture from "@com/upload/UploadSinglePicture.vue";
import { ref, reactive } from "vue";
import useRoute from "@util/router";
import $ from "@util/base"
import { $msg } from "@ui/msg"
import api from "@api/user"

const baseOptions = ref([])
const roleOptions = ref([])

getConfig()
function getConfig() {
  api.base(val => {
    baseOptions.value = val
  })
  api.roleList(val => {
    roleOptions.value = val
  })
}

const route = useRoute()

const urlQuery = route.query()
var readOnly = false
var title = "用户详情"
$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true
    title = "用户详情"
    getData()
  },
  add: () => {
    title = "新增用户"
  },
  modify: () => {
    title = "修改用户"
    getData()
  }
})

function getData() {
  api.details(route.query().code, val => {
    form.value = val
  })
}

const formRef = ref('')

const form = ref({
  name: null,
  avatar: null,
  shopId: null,
  // dataShopList: [],
  roleId: null,
  loginName: null,
  loginPassword: null
})

const rules = {
  name: [{
    required: true,
    message: '请输入用户名称',
    trigger: 'blur',
  }],
  avatar: [{
    required: true,
    message: '请上传用户头像',
    trigger: 'blur',
  }],
  shopId: [{
    required: true,
    message: '请选择归属基地',
    trigger: 'change',
  }],
  // dataShopList: [{
  //   type: 'array',
  //   required: true,
  //   message: '请选择数据权限',
  //   trigger: 'change',
  // }],
  roleId: [{
    required: true,
    message: '请选择角色',
    trigger: 'change',
  }],
  loginName: [{
    required: true,
    message: '请输入账号',
    trigger: 'blur',
  }],
  loginPassword: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur',
  }],
}

const checkForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      $.handleCRU(route.query().type, {
        add: () => { addData() },
        modify: () => { modifyData() }
      })
    } else {
      return false
    }
  })
}

function addData() {
  api.add(form.value, () => {
    $msg.succ("添加成功")
    back()
  })
}
function modifyData() {
  api.update(form.value, () => {
    $msg.succ("修改成功")
    back()
  })
}

function back() {
  route.go(-1)
}
</script>

<style lang="scss">
.user_details {
  height: 100%;

  .table_tag_box {
    text-align: left;

    .el-tag {
      margin-right: 10px;
    }
  }
}
</style>